<template>
    <div class="addInvetory">
        <el-button type="primary" size="small" icon="el-icon-circle-plus-outline" @click="show">新增发票</el-button>
        <el-dialog title="新增发票" :visible.sync="dialogFormVisible" width="350px">
            <el-form ref="formData" :model="formData" :rules="rules" label-width="80px">
                <el-form-item prop="billingCompany" label="开票公司" v-if="form.typeId === 2">
                    <el-input v-model="formData.billingCompany" placeholder="请输入开票公司" size="small"></el-input>
                </el-form-item>
                <el-form-item prop="invoiceNumber" label="发票号">
                    <el-input v-model="formData.invoiceNumber" placeholder="请输入发票号" size="small"></el-input>
                </el-form-item>
                <el-form-item prop="rUser" :label="form.typeId ===  2?'申请人':'报销人'">
                    <el-select
                        v-model="formData.rUser"
                        :placeholder="'请选择'+ (form.typeId===  2?'申请人':'报销人')"
                        size="small"
                        filterable
                        clearable
                    >
                        <el-option
                            v-for="item in userSelect"
                            :key="item.key"
                            :label="item.userDisplayName"
                            :value="item.userId"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="rTime" label="开票日期">
                    <el-date-picker
                        v-model="formData.rTime"
                        type="date"
                        placeholder="选择日期"
                        size="small"
                        :picker-options="pickerOptions"
                    ></el-date-picker>
                </el-form-item>
                <el-form-item prop="remark" label="备注">
                    <el-input
                        type="textarea"
                        :rows="2"
                        placeholder="请输入内容"
                        v-model="formData.remark"
                    ></el-input>
                </el-form-item>
                <el-form-item prop="pdfFile" label="附件">
                    <el-upload
                        ref="upload"
                        name="pdfFile"
                        :data="formData"
                        :limit="1"
                        :action="GLOBAL.urlRoot+ GLOBAL.oaService + '/invoice/add'"
                        accept=".jpg, .png, .jpeg, .pdf"
                        :auto-upload="false"
                        :on-success="onSuccess"
                        :on-error="uploadError"
                        :on-exceed="uploadExceed"
                    >
                        <el-button
                            slot="trigger"
                            size="mini"
                            type="success"
                            icon="el-icon-folder-add"
                        >选取文件</el-button>
                    </el-upload>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button
                    type="primary"
                    @click="onSubmit('formData')"
                    :icon="loading?'el-icon-loading':'el-icon-circle-plus-outline'"
                    :disabled="loading"
                    size="small"
                >保存</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
const ERR_OK = 200;
export default {
    props: {
        form: Object
    },
    data() {
        return {
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() > Date.now();
                }
            },
            dialogFormVisible: false,
            formData: { 
                billingCompany: "",
                invoiceNumber: "",
                rTime: "",
                remark: "",
                rUser: ""
            },
            userSelect: [],
            rules: {
                billingCompany: [
                    {
                        required: true,
                        message: "请输入开票公司",
                        trigger: "blur"
                    }
                ],
                invoiceNumber: [
                    {
                        required: true,
                        message: "请输入发票号",
                        trigger: "blur"
                    }
                ],
                rUser: [
                    {
                        required: true,
                        message: "请选择报销人",
                        trigger: "change"
                    }
                ],
                rTime: [
                    {
                        type: "date",
                        required: true,
                        message: "请选择日期",
                        trigger: "change"
                    }
                ]
            },
            loading: false
        };
    },
    created() {
        this.getUser();
    },
    methods: {
        show() {
            this.dialogFormVisible = true;
            if (this.$refs.upload) {
                this.$refs.upload.clearFiles();
                this.$refs["formData"].resetFields();
            }
        },
        getUser() {
            this.$ajax
                .get(this.GLOBAL.loginService + "/getDepartmentUser/1/1")
                .then(res => {
                    if (res.data.code === ERR_OK) {
                        this.userSelect = res.data.data;
                    }
                });
        },
        onSubmit(formName) {
            this.$refs[formName].validate(valid => {
                if (valid) {
                    if (this.$refs.upload.uploadFiles.length > 0) {
                        this.loading = true;
                        this.formData.invoiceNumber = this.formData.invoiceNumber.trim();
                        this.formData.cUser = this.$store.getters.userId;
                        this.formData.typeId = this.form.typeId;
                        this.$refs.upload.submit();
                    } else {
                        this.$message.error("请选择附件文件");
                    }
                } else {
                    return false;
                }
            });
        },
        onSuccess(response, file, fileList) {
            this.loading = false;
            this.$refs.upload.clearFiles();
            if (response.code === ERR_OK) {
                this.dialogFormVisible = false;
                this.$emit("updData");
                this.$refs["formData"].resetFields();
                this.$message.success("新增发票成功");
            } else {
                this.$message.error(response.data);
            }
        },
        uploadError(err, file, fileList) {
            this.loading = false;
            this.$message.error("上传出错,请重新上传----" + err);
        },
        uploadExceed(file, fileList) {
            this.$message.warning(
                `当前限制选择 1 个文件，本次选择了 ${
                    file.length
                } 个文件，共选择了 ${file.length + fileList.length} 个文件`
            );
        }
    }
};
</script>
<style lang="stylus" scoped>
.addInvetory {
    display: inline-block;

    .el-form-item {
        margin-bottom: 20px;
    }

    .el-select, .el-date-editor.el-input {
        width: 100%;
    }
}
</style>


